<template>
  <view class="preview-page" style="position:relative;">
    <!-- 分包 -->
    <u-swiper :list="list1" height="100vh" circular :autoplay="false" @click="markStatus = !markStatus"></u-swiper>
    <view class="mask" v-show="markStatus">
      <view class="go-back"></view>
      <view class="pt-10 pb-10 pl-28 pr-28 cfs-fff fs-24 cbg-blur radius"
        style="width: fit-content;margin: 0 auto;position:absolute;left: 0;right:0; top:15vh;">7/12
      </view>
      <view class="cfs-fff fw-500"
        style="font-size: 114rpx;width: fit-content;margin:0 auto;position:absolute;left: 0;right:0; top:calc(15vh + 80rpx);">
        {{ time }}</view>
      <view class="cfs-fff fs-28 fw-500"
        style="width: fit-content;margin: 0 auto;position:absolute;left: 0;right:0; top:calc(15vh + 216rpx);">{{ date }}
      </view>
      <view class="pt-20 pb-20 pl-56 pr-56 cbg-blur radius-40 grid g-ji-center" style="grid-template: 36rpx 24rpx/repeat(3,50rpx);grid-gap:20rpx 120rpx;
        width: fit-content;margin:0 auto;position:absolute;left: 0;right:0;bottom:10vh;">
        <text class="iconfont icon-info cfs-7a7a7a fs-36 fw-500" @click="infoShow = true"></text>
        <text class="iconfont icon-shoucang cfs-7a7a7a fs-36 fw-500"></text>
        <text class="iconfont icon-yunxiazai cfs-7a7a7a fs-36 fw-500"></text>
        <view class="fs-24 cfs-fff">信息</view>
        <view class="fs-24 cfs-fff">3</view>
        <view class="fs-24 cfs-fff">下载</view>
      </view>
    </view>

    <!-- info信息弹窗 -->
    <u-popup :show="infoShow" :round="10" mode="bottom" @close="infoShow = false">
      <view class="text-align-center pt-58 pb-50 cfs-7a7a7a fs-30">壁纸信息</view>
      <scroll-view scroll-y="true" style="height: 40vh;">
        <view class="pl-30 pr-30">
          <view class="flex f-ai-center mb-50">
            <text class="w-96 text-align-right fs-28 cfs-7a7a7a">壁纸ID:</text>
            <text class="flex-1 fs-28 cfs-0e0e0e ml-20">3243fegfert3454356</text>
          </view>
          <view class="flex f-ai-center mb-50">
            <text class="w-96 text-align-right fs-28 cfs-7a7a7a">发布者:</text>
            <text class="flex-1 fs-28 cfs-0e0e0e ml-20">彰化</text>
          </view>
          <view class="flex f-ai-center mb-50">
            <text class="w-96 text-align-right fs-28 cfs-7a7a7a">评分:</text>
            <text class="flex-1 fs-28 cfs-0e0e0e ml-20">4分</text>
          </view>
          <view class="flex f-ai-start mb-50">
            <text class="w-96 text-align-right fs-28 cfs-7a7a7a">摘要:</text>
            <text class="flex-1 fs-28 cfs-0e0e0e ml-20"
              style="line-height: 1.5;">人生若只如初见，何事秋风悲画扇人生若只如初见，何事秋风悲画扇人生若只如初见，何事秋风悲画扇人生若只如初见，何事秋风悲画扇人生若只如初见，何事秋风悲画扇人生若只如初见，何事秋风悲画扇</text>
          </view>
          <view class="flex f-ai-start pb-50">
            <text class="w-96 text-align-right fs-28 cfs-7a7a7a">标签:</text>
            <view class="flex-1 ml-20 ">
              <text v-for="item in 7" :key="item"
                class="inline-block pt-10 pb-10 pl-30 pr-30 fs-22 cfs-58b28f border-58b28f radius-40 mr-12 mb-12">美女女神</text>
            </view>
          </view>



        </view>
      </scroll-view>

    </u-popup>
  </view>
</template>
<script>
import { formatDate } from '@/utils/share'
export default {
  name: 'previewPage',
  data() {
    return {
      list1: [require('@/static/images/preview1.jpg'), require('@/static/images/preview1.jpg'), require('@/static/images/preview1.jpg')],
      time: '',
      date: '',
      markStatus: true,
      infoShow: false, //信息弹窗显示或隐藏

    }
  },
  created() {
    formatDate(new Date(), (dateInfo) => {
      this.date = `${dateInfo.month}月${dateInfo.day}日`
      this.time = `${dateInfo.hour}:${dateInfo.minute}`
    })
  },
  methods: {

  },
  computed: {}
}
</script>
